<!doctype html>
<html>
  <head>
    <title>Get Coordinates</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
      integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw=="
    ></script>
    <script>
      hljs.highlightAll();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col s12 m10 offset-m1">
          <h1 class="header center-align">Lookup Coordinates</h1>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m10 offset-m1">
          <form method="POST">
            <div class="row">
              <div class="input-field col s10">
                <span class="material-icons prefix">edit_location</span>
                <input
                  placeholder="1600 Amphitheatre Pkwy, Mountain View, CA 94043, US"
                  name="address"
                  type="text"
                  class="validate"
                />
                <label class="active" for="address">Address</label>
              </div>
              <div class="col s2">
                <div class="input-field">
                  <button
                    class="btn waves-effect waves-light"
                    type="submit"
                    name="action"
                  >
                    Submit
                    <i class="material-icons right">send</i>
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m10 offset-m1">
          <div class="card">
            <div class="card-content">
              <span class="card-title">Coordinates</span>
              <pre><code>{{ content }}</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
